import React from 'react'
import _ from 'underscore'
import View from 'lib/View.jsx'
import RootScope from './RootScope.es6'
import Card from 'lib/components/card.jsx'
import ChartWidget from 'lib/components/ChartWidget.jsx'
import GridWidget from 'lib/components/GridWidget.jsx'
import format from 'lib/util/format'
import addWidgetMixin from '../common/NewDashboardWidget.jsx'
import tips from '../common/indicator-tips.jsx'
var traceCols = [{
  title:'方法名',
  key:'name',
  render:function(fmtVal,rowData){
    return (
      <a className="link-in-list" href={'#/measurementname/'+rowData.nameId}>{fmtVal}</a>
    )
  }
},{
  title:'平均耗时(ms)',
  width:'13%',
  key:'executeTime',
  sortable:true,
  formatter:format.integer
},{
  title:'首次发生时间',
  width:'15%',
  key:'firstTime',
  sortable:true,
  formatter:format.stampToTime

},{
  title:'最后发生时间',
  width:'15%',
  key:'lastTime',
  sortable:true,
  formatter:format.stampToTime
},{
  title:'采集次数',
  width:'10%',
  key:'count',
  sortable:true,
  formatter:format.integer
},{
  title:'影响设备',
  width:'10%',
  key:'affected',
  sortable:true,
  formatter:format.integer
}]
export default class RootView extends View {
  constructor(props){
    super(props);
  }
  render(){
    let chartSettings = {
      legend: {
        itemStyle: {
          fontSize: '12px',
          width: 'auto',
          textOverflow: 'initial',
          overflow: 'auto',
          whiteSpace: 'nowrap'
        }
      }
    };

    return (
      <div>
        <div className="box">
          <Card title={
              <span>
                平均执行时间
                <i className="iconfont" data-tip={tips.interaction_avg_exec}>&#xe663;</i>
              </span>
            } extra={
              addWidgetMixin(this.scope.chart0Api,'平均执行时间',{
                chartType: 'line'
              })
            }>
            <ChartWidget
              store={this.state.chart0}
              chartType="line"
              chartSettings={chartSettings} />
          </Card>
        </div>
        <div className="box">
          <Card title={
              <span>
                执行次数
                <i className="iconfont" data-tip={tips.interaction_exec_count}>&#xe663;</i>
              </span>
            } extra={
              addWidgetMixin(this.scope.chart0Api,'执行次数')
            }>
            <ChartWidget chartSettings={chartSettings} store={this.state.chart1}/>
          </Card>
        </div>
        <div className="box">
          <Card title={
              <span>
                慢交互追踪列表
                <i className="iconfont" data-tip={tips.interaction_trace}>&#xe663;</i>
              </span>
            }>
            <GridWidget
              cols={traceCols}
              store={this.state.grid}
            />
          </Card>
        </div>
      </div>
    )
  }
}

RootView.defaultProps = {
  Scope:RootScope
}
